<template>
  <div class="chart3">
    <div class="chart3-header">
      <div>年：<el-date-picker size="small" v-model="searchYear" value-format="yyyy" type="year" placeholder="选择年份" />
      </div>
    </div>
    <div id="chart3"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { bussinessBingtu } from '@/api/system/order'

export default {
  data() {
    return {
      searchYear: '',
    }
  },
  watch: {
    searchYear: {
      handler(newVal) {
        this.init()
        this.$emit("changeYear", newVal);
      },
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const chartDom = document.getElementById('chart3')
      const myChart = echarts.init(chartDom)
      myChart.showLoading()
      bussinessBingtu({ searchYear: this.searchYear }).then(res => {
        this.initChart(res.data)
        myChart.hideLoading()
      })
    },
    initChart(res) {
      // console.log(res);
      const chartDom = document.getElementById('chart3')
      const myChart = echarts.init(chartDom)
      const data = []
      const total = (res.jpyJianDingTotal || 0) + (res.jpyFanMaiTotal || 0)

      // 鉴定相关
      const jianDingValue = res.jpyJianDingTotal || 0
      const jianDingPercent = total ? ((jianDingValue / total) * 100).toFixed(2) : '0.00'
      data.push({
        value: jianDingValue,
        name: '鉴定相关营业额',
        percent: jianDingPercent
      })

      // 贩卖相关
      const fanMaiValue = res.jpyFanMaiTotal || 0
      const fanMaiPercent = total ? ((fanMaiValue / total) * 100).toFixed(2) : '0.00'
      data.push({
        value: fanMaiValue,
        name: '贩卖相关营业额',
        percent: fanMaiPercent
      })

      const option = {
        title: {
          left: 'center',
          text: '营业额',
          top: 20,
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}日元 ({d}%)',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#333'
          },
          padding: [10, 15]
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'center',
          itemWidth: 10,
          itemHeight: 10,
          formatter: function(name) {
            const item = data.find(item => item.name === name)
            return `${name}\n${item.value}日元\n${item.percent}%`
          },
          textStyle: {
            color: '#666',
            fontSize: 12,
            lineHeight: 20
          }
        },
        series: [
          {
            name: '营业额类型',
            type: 'pie',
            radius: ['30%', '60%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicOut'
      }

      option && myChart.setOption(option)

      // 添加响应式调整
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart3 {
  width: 100%;

  #chart3 {
    height: 100%;
  }

  .chart3-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
  }
}
</style>
